<template>
    <div class="mt-16">
      <h3 class="text-16 opacity-80 mb-4">添加关键词</h3>
      <div class="flex gap-2">
        <n-select
          v-model:value="selectedKeywords"
          multiple
          filterable
          tag
          :options="presetKeywords"
          placeholder="选择或输入关键词"
          @create="handleKeywordCreate"
          style="flex: 1"
        />
        <n-button @click="clearKeywords" secondary>
          清空
        </n-button>
      </div>
      <div v-if="selectedKeywords.length > 0" class="mt-4">
        <n-tag
          v-for="(keyword, index) in selectedKeywords"
          :key="index"
          closable
          @close="removeKeyword(index)"
          class="mr-2 mb-2"
        >
          {{ keyword }}
        </n-tag>
      </div>
    </div>
  </template>
  
  <script setup>
  const selectedKeywords = ref([])
  
  const handleKeywordCreate = (keyword) => {
    selectedKeywords.value.push(keyword)
    return keyword
  }
  
  const removeKeyword = (index) => {
    selectedKeywords.value.splice(index, 1)
  }
  
  const clearKeywords = () => {
    selectedKeywords.value = []
  }
  </script>
  